<template>
    投递详情界面
    <el-row>
        <el-col :span="17" :offset="1">
            <div>
                <h2>{{ state.currentInfo.title }}</h2> <!-- 显示当前信息标题 -->
                <el-divider> <!-- 分隔线-->
                </el-divider>
                <div v-html="state.currentInfo.content"></div> <!-- 富文本内容渲染 -->
            </div>
            <el-button type="primary" @click="handlePost">投递</el-button> <!-- 触发投递操作的按钮 -->
        </el-col>
        <el-col :span="4" :offset="1" :pull="1">
        </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" title="选择简历" width="50%"> <!-- 选择简历的弹窗 -->
        <el-button v-for="item in state.Cvs" @click="handleChooseCv(item.id)"> <!-- 遍历简历列表生成选择按钮 -->
            {{ item.title }} <!-- 显示简历标题 -->
        </el-button>
    </el-dialog>
</template>

<script setup>
// 引入Vue相关钩子函数和API
import { onMounted, ref, watchEffect, onBeforeUnmount, reactive } from "vue";
import { ElMessage } from 'element-plus'; // 引入Element Plus消息提示组件
import axios from "axios"; // 引入HTTP请求库
import { useRoute, useRouter } from "vue-router"; // 引入路由相关钩子
import { useStore } from 'vuex'; // 引入Vuex状态管理钩子

// 声明弹窗显示状态的响应式变量
let dialogVisible = ref(false);
// 获取当前路由信息
const route = useRoute();
// 获取Vuex存储实例
const store = useStore();
// // 获取路由实例
// const router = useRouter();
// 声明组件状态的响应式对象
let state = reactive({
    currentInfo: { // 当前信息详情
        title: '',
        content: ''
    },
    Cvs: [] // 用户简历列表
});

/**
 * 投递操作处理函数
 * 功能：获取用户简历并打开选择弹窗
 */
const handlePost = async () => {
    const informationId = route.params.id; // 从路由参数中获取当前信息ID
    
    // 从后端获取用户真实简历数据
    let cvdata = await axios.get(`/cv/findByAuthor?author=${store.state.userInfo.id}`);
    console.log(cvdata); // 打印接口返回数据（调试用）
    
    state.Cvs = cvdata.data.data; // 更新简历列表为真实数据
    ElMessage.success("简历获取成功"); // 显示成功提示
    dialogVisible.value = true; // 打开选择简历的弹窗
};

/**
 * 选择简历处理函数
 * @param {string} cvId - 选中的简历ID
 */
const handleChooseCv = async (cvId) => {
    // 构造投递记录数据
    let form = {
        cv_id: cvId,
        article_id: route.params.id,
        advice: ""
    };
    console.log(form); // 打印投递数据（调试用）
    
    // 发送投递记录到后端
    await axios.post("/postRecord/add", form);
    ElMessage.success("投递成功"); // 显示投递成功提示
    dialogVisible.value = false; // 关闭弹窗
};

/**
 * 生命周期钩子：组件挂载后初始化数据
 */
onMounted(async () => {
    const id = route.params.id; // 从路由参数中获取当前信息ID
    console.log(id); // 打印ID（调试用）

    // 初始化加载中的状态
    state.currentInfo = {
        title: "loading...",
        content: "<h5>loading...</h5>"
    };

    // 从后端获取当前信息详情
    let res = await axios.get(`/article/findById?id=${id}`);
    console.log(res); // 打印接口返回数据（调试用）
    state.currentInfo = res.data.data; // 更新为真实信息数据
});

// // 清理副作用（此处未实际使用，预留钩子）
// onBeforeUnmount(() => {
//     stop();
// });
</script>

<style scoped lang="scss">
.el-row {
  margin-top: 30px; // 行容器顶部间距
}

.time {
  font-size: 13px; // 时间文本字体大小
  color: gray; // 时间文本颜色
}
</style>